<template>
  <div id="root">
    <router-view/>
  </div>
</template>

<style lang="scss">
@import 'style/base.css';
@import "style/root-index";

html {
  @include wh(100vw, 100vh);
}

body {
  @include wh(100vw, 100vh);
  font-size: var(--normal-font-size);
  color: $com-color-white;
  position: relative;
  &:before {
    content:  ' ';
    position: absolute;
    @include wh;
    background-image: url("~@/assets/images/Background gradient.jpg") !important;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    top: 0;
    left: 0;
  }

  &:after {
    z-index: 1;
    position: absolute;
    content: ' ';
    @include wh;
    top: 0;
    left: 0;
    background: url("~@/assets/images/galaxy .png")!important;
    background-size: 100vw 100vh;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}

#root {
  position: relative;
  z-index: 2;
  overflow: auto;
  overflow-y: hidden;
  @include wh(100vw, 100vh);
  background-image: url("~@/assets/images/earth .png");
  background-repeat: no-repeat;
  background-size: 60% auto;
  background-position: center bottom;

}


/*=============== SCROLL BAR ===============*/
@media only screen and (max-width: 767px) {
  #root {
    background-size: 90% auto;
    background-position: center;
  }
}

@media only screen and (min-width: 767px) {
  ::-webkit-scrollbar {
    width: .60rem;
    background-color: $com-bg-color-nav;
  }

  ::-webkit-scrollbar-thumb {
    background-color: $com-color-bright;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: $com-color-info;
  }
}
/*=============== MEDIA QUERIES ===============*/

// 每个模块 进场动画
.fade-enter-active {
  animation: bounce-in .5s;
}

.fade-leave-active {
  animation: bounce-in .5s ease-out;
}

@keyframes bounce-in {
  from {
    transform: scale(.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    //transform: translate3d(-50%,-50%,0);
    opacity: 1;
  }
}

// 加载进度条
#nprogress .bar {
  background: $com-color-primary !important; //自定义颜色
}

// 时间组件 成叠默认色系
.el-picker-panel,
.van-calendar {
  background: $com-color-root-navbar !important;
  .el-picker-panel__icon-btn, .el-date-picker__header-label {
    color: $com-color-white !important;
  }
}
</style>
